<!DOCTYPE html><html><head><title>04-第四章 HTML命名规范 选择器及背景</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="04-第四章-html命名规范-选择器及背景">04-第四章 HTML命名规范 选择器及背景</h1>

<p></p>



<h2 id="一-html命名规范">一、 HTML命名规范</h2>

<p>1）</p>

<blockquote>
  <p>A  名字用小写字母 <br>
  B   以英文开头 可以包含（英文字母  -   _  数字）,不能使用中文 <br>
  C   （见名知意）</p>
</blockquote>

<p>2）拓展名写法:</p>

<blockquote>
  <ul><li>A    加  -  或   _</li>
  <li>B   驼峰命名 第二单词大写 <br>
  更多请查看（HTML命名行业规范.txt）</li>
  </ul>
</blockquote>

<p>3） 命名的2种方式</p>

<blockquote>
  <p>Id   只能有一个名字，且在页面中相同的名字只能出现一次，相当于身份证号 <br>
   Class 相同名字的可以出现N次，并且可以有多个名字( 多个名字之间以空格分开)，   相当于小名</p>
</blockquote>

<hr>



<h2 id="二选择器">二、选择器</h2>

<blockquote>
  <table>
<thead>
<tr>
  <th align="left">选择符</th>
  <th align="center">描述</th>
  <th align="center">案例</th>
</tr>
</thead>
<tbody><tr>
  <td align="left"><code>*</code></td>
  <td align="center">通配选择符</td>
  <td align="center"><code>*{margin:0;padding:0;}</code></td>
</tr>
<tr>
  <td align="left">元素选择器</td>
  <td align="center">就是以元素的标签名</td>
  <td align="center"><code>h1{font-size:18px;}</code></td>
</tr>
<tr>
  <td align="left">id选择符</td>
  <td align="center">元素以ID进行命名</td>
  <td align="center"><code>#info{width:200px;height:100px;}</code></td>
</tr>
<tr>
  <td align="left">class类选择符</td>
  <td align="center">就是以元素的class名</td>
  <td align="center"><code>.txt{font-size:12px;}</code></td>
</tr>
<tr>
  <td align="left">后代选择符</td>
  <td align="center">标签嵌套情况使用</td>
  <td align="center"><code>.txt div{font-size:18px;}</code></td>
</tr>
</tbody></table>

</blockquote>

<hr>



<h2 id="三背景">三、背景</h2>



<h4 id="1分样式">1、分样式：</h4>

<p><code>background-color</code>-背景颜色  <br>
<code>background-image</code>  -背景图片   url(‘路径’); <br>
<code>background-repeat</code> -背景平铺   </p>

<blockquote>
  <ul><li>no-repeat-不平铺</li>
  <li>repeat-x-x轴平铺</li>
  <li>repeat-y-y轴平铺</li>
  </ul>
</blockquote>

<p><code>background-position</code>:x y   -背景位置</p>

<blockquote>
  <p>X轴的值的值：</p>
  
  <ul><li>一、left左对齐 center水平居中   right右对齐</li>
  <li>二、%</li>
  <li>三、px</li>
  </ul>
  
  <p>Y轴的值:</p>
  
  <ul><li>一、top顶部对齐 center垂直居中 bottom底部对齐</li>
  <li>二、%</li>
  <li>三、px</li>
  </ul>
  
  <p>注意=&gt;如果给一个值：第二个值默认center（50%）; <br>
  值：X轴的值 Y轴的值如果给的是方位值：可以颠倒</p>
</blockquote>

<p><code>background-size</code>   -背景大小的值</p>

<blockquote>
  <p>%:只设置一个值，则第二个值会被设置为 “<code>auto</code>“。 <br>
  px:只设置一个值，则第二个值会被设置为 “<code>auto</code>“。 <br>
  关键词：</p>
  
  <ul><li><code>contain</code> 等比例缩放X轴或Y轴其中一个方向    </li>
  <li><code>cover</code>   等比例缩放直到铺满X轴和Y轴</li>
  </ul>
</blockquote>

<hr>



<h4 id="2复合样式">2、复合样式：</h4>

<blockquote>
  <p>background:color image repeat background-position/background-size</p>
</blockquote></div></body></html>